<template>
    <view class="personalInfo plr15 ">

        <view class="personalBox mt10 bgWhite radius8">

            <uv-form labelPosition="left" :form="form" :rules="personalRules" ref="form">

            <uv-form-item label="城市" borderBottom labelWidth="120rpx">
                    <view class="flex1 align-center justify-end gray5" @click="showAreaPicker">
                        <text>{{area}}</text>
                        <uv-icon name="arrow-right"></uv-icon>
                    </view>
                </uv-form-item>
            <uv-form-item label="门店" borderBottom labelWidth="120rpx">
                    <view class="flex1 align-center justify-end gray5" @click="showMallPicker">
                        <text>{{mallName}}</text>
                        <uv-icon name="arrow-right"></uv-icon>
                    </view>
                </uv-form-item>
                  <uv-form-item label="名称" borderBottom labelWidth="120rpx">
                    <uv-input v-model="title" border="none" placeholder="请输入约球主题(15字以内)">
                    </uv-input>
                </uv-form-item>
              <uv-form-item label="类型" borderBottom labelWidth="120rpx">
                    <view class="flex1 align-center justify-end gray5" @click="showLabelPicker()">
                        <text>{{typeName}}</text>
                        <uv-icon name="arrow-right"></uv-icon>
                    </view>
                </uv-form-item>
                 <uv-form-item label="段位" borderBottom labelWidth="120rpx">
                    <view class="flex1 align-center justify-end gray5" @click="showLevelPicker()">
                        <text>{{level}}</text>
                        <uv-icon name="arrow-right"></uv-icon>
                    </view>
                </uv-form-item>
      
          <uv-form-item label="时间" borderBottom labelWidth="120rpx">
              	<uni-datetime-picker :start="minDate" returnType="timestamp"  type="datetime" v-model="single" @change="changeLog"
              				><view class="flex1 align-center justify-end gray5"> {{timeType}}  <uv-icon name="arrow-right"></uv-icon></view></uni-datetime-picker
              			>
                   <!-- <view class="flex1 align-center justify-end gray5" @click="showTimePicker()">
                        <text>{{timeType}}</text>
                       
                    </view> -->
                </uv-form-item>
                <view class="">
                    <view class="mt10 mb10">
                        备注
                    </view>
                    <textarea name="" v-model="beizhu" placeholder="请输入备注说明(20字以内)" id="" cols="30"
                        rows="10"></textarea>

                </view>
            </uv-form>
        </view>

        <view class="save_btn" @click="save">
            发布同城约球信息
        </view>

        <uv-picker ref="areaPicker" :columns="[areaRrand]" keyName="name" @change="carChange"
            @confirm="areaConfirm"></uv-picker>
        <uv-picker ref="labelPicker" keyName="title" :columns="[labelList]" @confirm="labelConfirm"></uv-picker>
        <uv-picker ref="genderPicker" keyName="title" :columns="[genderList]" @confirm="genderConfirm"></uv-picker>
        <uv-datetime-picker :filter="filter" ref="datetimePicker" :minDate="minDate" v-model="yuyue_time" mode="datetime"
            @confirm="timeConfirm">
        </uv-datetime-picker>
        <uv-picker ref="mallPicker" keyName="name" :columns="[mallList]" @confirm="mallConfirm"></uv-picker>
        <uv-picker ref="levelPicker" keyName="name" :columns="[levelList]" @confirm="levelConfirm"></uv-picker>



    </view>
</template>

<script>
    export default {
        data() {
            return {
                loading: false,
                personalRules: {},
                form:{},
                areaRrand: [],
                genderList: [],
                columnData: [],
                area: "请选择",
                mallList: [],
                mallName: "请选择",
                time: '请选择',
                typeName: "请选择",
                timeType: "请选择",
                checkboxValue: [],
                labelList: [],
                label_id: "",
                shop_id: "",
                keyword: "",
                level: "请选择",
                beizhu: "",
                title: "",
                yuyue_time: null,
                minDate:  Number( new Date().getTime() ),
                single:"",
                levelList: [{
                        name: '1-3段',
                        id: 1
                    },
                    {
                        name: '3-5段',
                        id: 2
                    },
                    {
                        name: '5-7段',
                        id: 3
                    },
                    {
                        name: '7-9段',
                        id: 4
                    },
                    {
                    	name: '9-11段',
                    	id: 5
                    },
                ]
            };
        },
        onReady() {

        },
        onLoad() {
            this.getArea()
            this.getCate()

        },
        methods: {
            filter(type, options) {
            				if (type === 'minute') {
            					return ['']
            				}
            	return options;
            },
            changeLog(e){
              console.log(e)  
              // this.timeType=e
              this.yuyue_time = e
              this.timeType = this.$utils.formatDateTime(e)
            },
            async getCate() {
                const list = await this.$api.labelLsts()
                console.log(list)
                this.labelList = list.data

            },
            async getUserInfo() {
                const {
                    data
                } = await this.$api.userinfo()
                // if(data.area&&this.AreaData&&this.AreaData.length){
                //     this.AreaData.map(item=>{
                //         item.child.map(i=>{
                //             if(i.id==data.area){
                //                 this.area = i.name
                //             }
                //         })
                //     })    
                // }
                this.area = data.areaname
                this.personaModel = data
            },
            areaConfirm(e) {
                console.log(e)
                this.area = e.value[0].name
                this.area_id = e.value[0].id
                this.$api.getShopList({
                    area_id: this.area_id
                }).then(res => {
                    console.log(res)
                    this.mallList = res.list
                })


            },
            mallConfirm(e) {
                console.log(e)
                this.mallName = e.value[0].name
                this.shop_id = e.value[0].id
            },
            levelConfirm(e) {
                this.level = e.value[0].name
            },
            labelConfirm(e) {
                console.log(e)
                this.typeName = e.value[0].title
                this.label_id = e.value[0].id

            },
            timeConfirm(e) {
                console.log(e)
                this.yuyue_time = e.value
                this.timeType = this.$utils.formatDateTime(e.value)
            },

            showAreaPicker() {
                this.$refs.areaPicker.open()
            },
            showMallPicker() {
                this.$refs.mallPicker.open()
            },
            showLabelPicker() {
                this.$refs.labelPicker.open()
            },
            showLevelPicker() {
                this.$refs.levelPicker.open()
            },
            showTimePicker() {
                this.$refs.datetimePicker.open()
            },
        
            async getArea() {
                let data = await this.$api.getArea()
                console.log(data)
                this.areaRrand = data.data
            },
            toIndex() {

            },
            goBack() {
                uni.navigateBack({
                    delta: 1
                })
            },

            async save() {
                if (this.loading) return
                this.loading = true
                const res = await this.$api.ballAdd({
                    area_id: this.area_id,
                    title: this.title,
                    label_id: this.label_id,
                    shop_id: this.shop_id,
                    level: this.level,

                    beizhu: this.beizhu,
                    yuyue_time: (this.yuyue_time/1000).toFixed(0),
                })


                if (res.code == 1) {
                    this.loading = false
                    this.$utils.msg('操作成功')
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 800)
                } else {
                    this.loading = false
                    this.$utils.msg(res.msg)
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .header {
        margin-bottom: 44rpx;
        font-size: 28rpx;
        color: #666666;

        .notice {
            margin: 64rpx 0 20rpx;
            font-size: 48rpx;
            color: #000000;
            line-height: 54rpx;
        }

    }

    .personalInfo {


        position: relative;

        .personalBox {
            padding: 40rpx 48rpx 62rpx 48rpx;

        }

        .save_btn {
            width: 100%;
            height: 90rpx;
            margin-top: 52rpx;
            margin-bottom: 40rpx;
            background: #2CC6A1;
            border-radius: 8rpx;
            font-size: 32rpx;
            color: #FFFFFF;
            text-align: center;
            line-height: 90rpx;
        }

    }
    /deep/.uv-form-item__body{
            padding: 30rpx 0!important;
    }
</style>